<template>
  <div>
    <Form :model="formItem" label-position="top">
      <FormItem label="图片">
        <Row class="bench_search">
          <div class="demo-upload-list" v-for="(item,index) in imgList" :key="index">
            <img :src="item">
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
              <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
          </div>
          <Upload
            ref="upload"
            :show-upload-list="false"
            :format="['jpg','jpeg','png']"
            :max-size="2048"
            :before-upload="handleBeforeUpload"
            multiple
            type="drag"
            action="//jsonplaceholder.typicode.com/posts/"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
          <Modal title="查看图片" v-model="visible">
            <img :src="imgListShow" v-if="visible" style="width: 100%">
            <div slot="footer">
              <div>
                <Button @click="visible = false" type="text" class="cancel_btn">取消</Button>
              </div>
            </div>
          </Modal>
        </Row>
      </FormItem>
      <FormItem label="内容">
        <quill-editor
            v-model="formItem.mobile_content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
      </FormItem>
      <FormItem label="须知">
        <quill-editor
            v-model="formItem.notice"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
      </FormItem>
      <FormItem label="注意事项">
        <Input v-model="formItem.matters_needing_attention" type="textarea" :row="5" :autosize="{minRows: 3, maxRow: 5}"></Input>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { getSign, createUpLoadFiles } from '@/api/medical.js'
export default {
  name: 'image-text-card',
  data () {
    return {
      visible: false,
      imgList: [],
      imgListShow: '',
      // formItem: {},
      content: null,
      editorOption: {
        placeholder: '在此处输入...'
      }
    }
  },
  components: {
    quillEditor
    // VueQuillEditor
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  props: {
    formItem: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    onEditorBlur () { // 失去焦点事件
    },
    onEditorFocus () { // 获得焦点事件
    },
    onEditorChange () { // 内容改变事件
      // console.log(this.content)
      // $('.text').html(this.content)
    },
    saveHtml (event) { // 点击保存按钮保存
      console.log(this.content)
    },
    handleView (img) {
      this.imgListShow = img
      this.visible = true
    },
    handleRemove (file) {
      this.imgList.splice(this.imgList.indexOf(file), 1)
    },
    handleBeforeUpload (file) {
      // const check = this.imgList.length < 1
      // if (!check) {
      //   this.$Notice.warning({
      //     title: '最多上传1张图片'
      //   })
      //   return check
      // }
      this.beforeUpload(file)
    },
    beforeUpload (file) {
      let upPicData = {}
      // upPicData.filePath = 'medical/hospital/images'
      upPicData.filePath = 'medical/service/images'
      upPicData.fileName = '服务图片'
      var time = new Date().getTime()
      let timestamp = time.toString()
      upPicData.timestamp = timestamp
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        upPicData.fileName = upPicData.fileName + timestamp + '.' + file.type.substring(6)
        upPicData.file = reader.result.substring(index)
        that.upPic(upPicData)
      }
      return false
    },
    upPic (fileData) {
      console.log('4444444')
      getSign({
        filePath: fileData.filePath,
        fileName: fileData.fileName,
        timestamp: fileData.timestamp
      }).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, {
            sign: res.data.data.sign,
            timestamp: fileData.timestamp,
            filePath: fileData.filePath,
            fileName: fileData.fileName,
            file: fileData.file
          }).then(ret => {
            if (ret.data.errcode === 0) {
              this.imgList = [ret.data.data]
              this.formItem.give_service_picture = this.imgList[0]
              this.$Message.success({
                content: '上传成功,\n' + ret.data.errmsg
              })
            } else {
              this.$Message.error({
                content: '上传失败,\n' + ret.data.errmsg
              })
            }
          })
        }
      })
    }
  },
  mounted () {
  }
}
</script>
<style scoped>
</style>
